<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="content-type" content="text/html; charset=UTF-8" />
    <title>退款管理</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" type="text/css" media="screen" />
    <script type="text/javascript" th:src="@{/jquery/jquery-1.12.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

    <link th:href="@{/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" />

</head>
<body>


<div class="panel panel-default">
    <ol class="breadcrumb">
        <li class="active">退款列表</li>
    </ol>

    <div style="padding: 10px">
        <form id="formRefundSearch" method="post" action="/admin/refund/" class="form-inline">
            <div class="row">
                <div class='col-sm-2'>
                    <div class="form-group">
                        <label>用户账号：</label>
                        <!--指定 date标记-->
                        <div class='input-group' id='mobile'>
                            <input class="form-control" type="text" name="mobile" th:value="${query.mobile}">
                        </div>
                    </div>
                </div>
                <div class='col-sm-4'>
                    <label>起止时间：</label>
                    <div class="form-group">
                        <!--指定 date标记-->
                        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" readonly name="startTime" id="startTime" th:value="${query.startTime}">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" readonly name="endTime" id="endTime" th:value="${query.endTime}">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                </div>
                <div class='col-sm-3'>
                    <div class="form-group">
                        <div class='input-group' id='searchButton'>
                            <button id="btUserSearch" type="submit" class="btn btn-default">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- Table -->
        <div class="row" style="padding-top: 15px;">
            <div class='col-sm-2'>
                <table class="table" style="border-top-width:0px;border: 1px solid #dddddd;">
                    <tr>
                        <td><span>总退款金额:</span></td>
                        <td><span th:text="${completeCount}"></span></td>
                    </tr>
                    <tr>
                        <td><span>已退数:</span></td>
                        <td><span th:text="${unCompleteCount}"></span></td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Table -->
        <table class="table table-striped">
            <tr>
                <th><span>ID</span></th>
                <th><span>用户账号</span></th>
                <th><span>退款总金额</span></th>
                <th><span>详细记录</span></th>
            </tr>
            <th:block th:if="${not #lists.isEmpty(refundList)}">
                <tr th:each="refund : ${refundList}">
                    <td th:text="${refund.id}"></td>
                    <td th:text="${refund.mobile}"></td>
                    <td th:text="${refund.amount}"></td>
                    <td>
                        <a th:href="${'/admin/refund/detail/?id='+refund.id}"><span>查看</span></a>
                    </td>
                </tr>
            </th:block>
        </table>
    </div>

    <ul class="pager">
        <li id="liPrePage">
            <a th:if="${not isFirstPage}"
               th:href="@{${'/admin/refund/'}(pageNum=${pageNum-1},pageSize=${pageSize},mobile=${query.mobile},startTime=${query.startTime},endTime=${query.endTime})}">
                <
            </a>
            <a th:if="${isFirstPage}" href="javascript:void(0);">
                <
            </a>
        </li>
        <li id="liNextPage">
            <a th:if="${not isLastPage}"
               th:href="@{${'/admin/refund/'}(pageNum=${pageNum+1},pageSize=${pageSize},mobile=${query.mobile},startTime=${query.startTime},endTime=${query.endTime})}">
                >
            </a>
            <a th:if="${isLastPage}" href="javascript:void(0);">
                >
            </a>
        </li>
    </ul>

</div>


<script th:src="@{/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js}"></script>
<script th:src="@{/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js}"></script>
<script type="text/javascript">
    $('.form_date').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
</script>
</body>
</html>